<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script>
function generateRolling() {
		var content = " ";
		var rollingDiv = $("#rolling");
		
		rollingDiv.unbind("mouseover");
	 	rollingDiv.unbind("mouseout");
	 	rollingDiv.unbind("rolling");
	 	rollingDiv.unbind("viewing");
	 	rollingDiv.unbind("start");
	 	rollingDiv.unbind("stop");
	 	rollingDiv.unbind("revese");
	 		
		content += "var rollingDiv = $(\"#rolling\");\r\n";
		
		var f = document.rollingForm;
		rollingDiv.rolling(f.direction[f.direction.selectedIndex].value, f.width.value, f.height.value, f.viewingItemCount.value);
		content += "rollingDiv.rolling(\"" + f.direction[f.direction.selectedIndex].value + "\", " + f.width.value + ", " + f.height.value + ", " + f.viewingItemCount.value + ");\r\n";
		
		if (f.mouseEvent.checked) {
			rollingDiv.bind("mouseover", function() {
				 $("#rolling").stopRolling();
			});
			
			rollingDiv.bind("mouseout", function() {
				 $("#rolling").resumeRolling();
			});
			
			content += "rollingDiv.bind(\"mouseover\", function() {\r\n";
			content += "\t$(\"#rolling\").stopRolling();\r\n";
			content += "});\r\n";
			content += "rollingDiv.bind(\"mouseout\", function() {\r\n";
			content += "\t$(\"#rolling\").resumeRolling();\r\n";
			content += "});\r\n";
	  }
		
		for (var i = 0; i < 5; i++) {
			var item = eval("f.item" + i + ".value");
			if (item != "") {
					rollingDiv.addRollingItem(jQuery.trim(item));
					content += "rollingDiv.addRollingItem(\"" + jQuery.trim(item) + "\");\r\n";
			}
		}
		
		rollingDiv.bindRollingEvent(function(event, currentRollingItem) {
			// write code when rolling
		});
		rollingDiv.bindViewingEvent(function(event, currentRollingItem) {
			// write code when viewing
		});
		rollingDiv.bindStartEvent(function(event) {
			// write code when start
		});
		rollingDiv.bindStopEvent(function(event) {
			// write code when stop
		});
		
		
		content += "rollingDiv.bindRollingEvent(function(event, currentRollingItem) {\r\n";
		content += "\t// write code when rolling\r\n";
		content += "});\r\n";
		
		content += "rollingDiv.bindViewingEvent(function(event, currentRollingItem) {\r\n";
		content += "\t// write code when viewing\r\n";
		content += "});\r\n";
		
		content += "rollingDiv.bindStartEvent(function(event) {\r\n";
		content += "\t// write code when start\r\n";
		content += "});\r\n";
		
		content += "rollingDiv.bindStopEvent(function(event) {\r\n";
		content += "\t// write code when stop\r\n";
		content += "});\r\n";
		
		content += "rollingDiv.bindReverseEvent(function(event) {\r\n";
		content += "\t// write code when reverse\r\n";
		content += "\t// alert($(\"#rolling\").getRollingDirection());\r\n";
		content += "});\r\n";
		
		rollingDiv.startRolling(f.rollingAnimationTime.value, f.viewingTime.value, f.rollingAnimationFrame.value);
		content += "rollingDiv.startRolling(" + f.rollingAnimationTime.value + ", " + f.viewingTime.value + ", " + f.rollingAnimationFrame.value + ");\r\n";
		$("#script").text(content);
}

function execute() {
	 eval(document.rollingForm.script.value);
}
</script>
<body>
<b>Generating Rolling Example</b><p>
<div id="rolling"></div>
<form name="rollingForm">
<table>
<tr>
<td align='center'>
	<table border="1">
		<tr><td width="150">Item Width</td><td><input name="width" type="text" size="3" value="130"></tr>
		<tr><td>Item Height</td><td><input name="height"  type="text" size="3" value="100"></tr>
		<tr><td>Direction</td><td>
			<select name="direction">
				<option value="left">left</option>
				<option value="right" selected>right</option>
				<option value="up">up</option>
				<option value="down">down</option>
			</select>
		</tr>
		<tr><td>Viewing Item Count</td><td><input name="viewingItemCount" type="text" size="1" value="4"></tr>
		<tr><td>Rolling Animation Time</td><td><input name="rollingAnimationTime" type="text" size="3" value="10"></tr>
		<tr><td>Viewing Time</td><td><input name="viewingTime" type="text" size="4" value="1000"></tr>
		<tr><td>Rolling Animation Frame</td><td><input name="rollingAnimationFrame" type="text" size="3" value="100"></tr>
		<tr><td>When mouseover, rolling stop</td><td><input name="mouseEvent" type="checkbox" checked></tr>
		<tr><td>Item #1</td>
			<td>
<textarea name="item0" rows="2" cols="40" wrap="off">
<img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100'>
</textarea>
			</td>
		</tr>
		<tr><td>Item #2</td>
			<td>
<textarea name="item1" rows="2" cols="40" wrap="off">
<img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100'>
</textarea>
			</td>
		</tr>
		<tr><td>Item #3</td>
			<td>
<textarea name="item2" rows="2" cols="40" wrap="off">
<img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100'>
</textarea>
			</td>
		</tr>
		<tr><td>Item #4</td>
			<td>
<textarea name="item3" rows="2" cols="40" wrap="off">
<img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100'>
</textarea>
			</td>
		</tr>
		<tr><td>Item #5</td>
			<td>
<textarea name="item4" rows="2" cols="40" wrap="off">
<img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg' width='130' height='100'>
</textarea>
			</td>
		</tr>		
	</table>
	<input type="button" value="generate" onclick="javascript: generateRolling()">
</td>
<td valign="top" align="center">
	<textarea id="script" rows="20" cols="80" wrap="off"></textarea><br>
	<input type="button" value="execute this script" onclick="javascript: execute()">
</td>
</tr>
</table>
</form>
</body>